<template>

  <div>
    <router-link to="/noticesAdd">
      <el-button size="mini" type="primary">
        添加
      </el-button>
    </router-link>
    <el-table :data="displayData" style="width: 100%">
      <el-table-column label="序号">
        <template slot-scope="scope">{{ scope.$index + 1  }}</template>
      </el-table-column>
      <el-table-column label="公告标题">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="公告信息">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">{{ scope.row.updateDate }}</template>
      </el-table-column>



      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="big" placeholder="输入标题搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.row.id, scope.row)">
            修改
          </el-button>
          <el-button size="mini"  type="danger" @click="handleDel(scope.row.id, scope.row)">
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   :current-page.sync="currentPage"
                   @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "UserManager",
  data() {
    return {
      tableData: [], // 原始数据
      currentPage: 1, // 当前页数
      pageSize: 5, // 每页显示的数量
      total: 0, // 总条目数
      search: "",// 搜索关键词
    };
  },
  computed: {
    displayData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      if (this.search) {
        return this.tableData.filter(item => {
          return item.title.includes(this.search);
        }).slice(start, end);
      } else {
        return this.tableData.slice(start, end);
      }
    }
  },
  methods: {
    handleDel(index, row){
      this.$confirm('此操作将删除账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('http://localhost:8082/notices/deleteNotices?id=' + row.id ).then(response => {
          this.loadData(); // 重新加载数据
          if(response.data.code===200) {
            this.$message({
              type: 'success',
              message: "删除成功",
            });
          }

        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败',
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    handleEdit(index, row) {
      this.$router.push('/noticesUpdate?id=' + row.id);
    },

    handleCurrentChange(val) {
      this.currentPage = val;
    },
    loadData() {
      axios.get("http://localhost:8082/notices/list").then((response) => {
        this.tableData = response.data.data;
        this.total = this.tableData.length;
      });
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>